<script setup>
import { ref, onMounted } from "vue";
import { searchMaterial } from "@/apis/search"
import defaultImg from "@/assets/material.png"

const result = ref({
  data: [],
  current_page: 1,
  last_page: 1,
  total: 0
});
const loading = ref('');
onMounted(() => {
  searchMaterial({
    condition: "total < 10"
  })
    .then(res => {
      const { code, data } = res.data;
      if (code === 1) {
        result.value = data;
      }
    })
})

function onScroll(e) {
  if (e < 160 && loading.value === "") {
    loading.value = "loading";
    searchMaterial({
      condition: "total < 10"
    }, result.value.current_page + 1)
      .then(res => {
        const { code, data } = res.data;
        if (code === 1) {
          result.value = {
            data: result.value.data.concat(data.data),
            current_page: data.current_page,
            last_page: data.last_page,
            total: data.total
          }
        }
      })
      .finally(() => {
        loading.value = "";
      })
  }
}
</script>
<template>
  <main>
    <template v-if="result.total < 1">
      <t-empty description="这里是空的">
        <template #icon>
          <t-icon name="info-circle"></t-icon>
        </template>
      </t-empty>
    </template>

    <template v-if="result.total > 0">
      <t-list @scroll="onScroll" :async-loading="loading">
        <t-cell v-for="item in result.data" :title="item.name" :key="item.id"
          :image="item.cover_info?.url != '' ? item.cover_info?.url : defaultImg">
          <template #description>
            <t-tag style="margin: 4px;">物品编码: {{ item.material_id }}</t-tag>
            <t-tag style="margin: 4px;" theme="success">物品规格: {{ item.specs }}</t-tag>
            <t-tag style="margin: 4px;" theme="danger">库存数量: {{ item.total || 0 }}</t-tag>
          </template>
        </t-cell>
      </t-list>
    </template>
  </main>
</template>